<div class="row">
  <div class="col-md-6">
    <h2>Please enter your information</h2>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
      <form #f="ngForm" novalidate (ngSubmit)="registerUser(f)">
          <div class="form-group">
              <label for="first-name">First name</label>
              <input type="text" class="form-control" id="first-name" placeholder="First name" name="firstName" tmFocus ngModel>              
          </div>
          <div class="form-group">
              <label for="last-name">Last name</label>
              <input type="text" class="form-control" id="last-name" placeholder="Last name" name="lastName" ngModel>              
          </div>
          <div class="form-group">
            <label for="email">Email</label>
          	<input id="email" type="text" required name="email" validateEmail class="form-control" placeholder="Email" ngModel  #email="ngModel">
            <small [hidden]="email.valid || (email.pristine && !submitted)" class="text-danger">Please enter a valid email</small>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password" ngModel>
          </div>   
          <div class="form-group">
             <label for="location">Location</label>
             <input type="text" class="form-control" id="location" placeholder="Location"  required name="location" ngModel>              
          </div> 

          <div class="form-group">
              <button type="submit" class="btn btn-primary" [disabled]="f.invalid || isRequesting">Sign Up</button>
              <app-spinner [isRunning]="isRequesting"></app-spinner> 
          </div>

          <div *ngIf="errors" class="alert alert-danger" role="alert">
              <strong>Oops!</strong> {{errors}}
            </div>               
          
        </form>
   </div>
</div>


